import React, { Component } from 'react'
import { Text, View, StyleSheet, TextInput } from 'react-native'
import { setSpText, scaleSizeW, scaleSizeH } from '../util/ScreenUtil'
import Icon from '../assets/fonts/iconfont'

export default class B2 extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: '找片',
      tabBarIcon: ({ focused }) => {
        if (focused) {
          return <Icon name="weixin" size={30} color="#9d9d9d" />
        } else {
          return <Icon name="weixin" size={30} color="#ccc" />
        }
      },
    }
  }
  state = {
    searchText: '',
  }
  render() {
    return (
      <View style={{ flex: 1 }}>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#41bd55',
            height: scaleSizeH(150),
            paddingTop: scaleSizeH(50),
            position:'relative'
          }}
        >
          <Icon name="xingtaiduICON_sousuo--" style={styles.sousuo} />
          <TextInput
            style={{
              width: scaleSizeW(620),
              height: scaleSizeH(70),
              padding: 0,
              paddingLeft: scaleSizeW(30),
              backgroundColor: '#fff',
              marginLeft: scaleSizeW(16),
              marginRight: scaleSizeW(26),
              borderRadius: 5,
            }}
            placeholder="搜索电影 / 电视剧 / 影人"
          />
          <Text
            style={{
              fontSize: setSpText(30),
              color: '#fff',
              fontWeight: 'bold',
              letterSpacing: 1,
            }}
          >
            取消
          </Text>
        </View>
        <View
          style={{
            height: scaleSizeH(100),

            flexDirection: 'row',
            alignItems: 'center',
          }}
        >
          <Text
            style={{
              color: '#979797',
              fontSize: setSpText(26),
              paddingLeft: scaleSizeW(34),
            }}
          >
            热门搜索
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Icon name="top1" size={14} color="#febf15" />
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(36) }}>
            世界之间
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Icon name="top2" size={14} color="#b0bbbf" />
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(36) }}>
            等待指示
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Icon name="top3" size={14} color="#c86042" />
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(36) }}>
            尸囚狱：前篇
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Text
            style={{
              color: '#c6c6c6',
              fontSize: setSpText(22),
              fontWeight: 'bold',
              marginLeft: scaleSizeW(6),
            }}
          >
            4
          </Text>
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(40) }}>
            毒液：致命守护者
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Text
            style={{
              color: '#c6c6c6',
              fontSize: setSpText(22),
              fontWeight: 'bold',
              marginLeft: scaleSizeW(6),
            }}
          >
            5
          </Text>
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(40) }}>
            7月22日
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Text
            style={{
              color: '#c6c6c6',
              fontSize: setSpText(22),
              fontWeight: 'bold',
              marginLeft: scaleSizeW(6),
            }}
          >
            6
          </Text>
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(40) }}>
            网络迷踪
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Text
            style={{
              color: '#c6c6c6',
              fontSize: setSpText(22),
              fontWeight: 'bold',
              marginLeft: scaleSizeW(6),
            }}
          >
            7
          </Text>
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(40) }}>
            人言可畏
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Text
            style={{
              color: '#c6c6c6',
              fontSize: setSpText(22),
              fontWeight: 'bold',
              marginLeft: scaleSizeW(6),
            }}
          >
            8
          </Text>
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(40) }}>
            康斯坦丁：恶魔之城 电影版
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Text
            style={{
              color: '#c6c6c6',
              fontSize: setSpText(22),
              fontWeight: 'bold',
              marginLeft: scaleSizeW(6),
            }}
          >
            9
          </Text>
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(40) }}>
            江湖儿女
          </Text>
        </View>
        <View
          style={{
            ...styles.rowBlock,
            justifyContent: 'flex-start',
          }}
        >
          <Text
            style={{
              color: '#c6c6c6',
              fontSize: setSpText(22),
              fontWeight: 'bold',
              marginRight: scaleSizeW(6),
            }}
          >
            10
          </Text>
          <Text style={{ fontSize: setSpText(28), marginLeft: scaleSizeW(26) }}>
            娼年
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  rowBlock: {
    width: scaleSizeW(750),
    height: scaleSizeH(104),
    borderBottomWidth: scaleSizeH(1),
    borderBottomColor: '#e5e5e5',
    backgroundColor: '#fff',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: scaleSizeW(34),
    paddingRight: scaleSizeW(34),
    fontSize: setSpText(28),
  },
  sousuo:{
    position:'absolute',
    left:scaleSizeW(20),
    top:scaleSizeH(83),
    zIndex:1,
    color:'gray',
    fontSize:setSpText(34)
  }
})
